<template>
  <div>
    <el-form :rules="rules"
             v-loading="loading"
             element-loading-text="正在登录..."
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)"
             ref="loginForm" :model="loginForm"  class="loginContainer">
      <h3 class="loginTitle">系统登录</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" placeholder="输入账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="validateCode">
        <el-input type="text" v-model="loginForm.validateCode" placeholder="点击图片更换验证码" style="width: 200px;float:left"></el-input>
        <img :src="catpchaUrl" @click="updateCaptcha" style="float:right"/>
      </el-form-item>
      <el-checkbox class="loginRem" v-model="checked">记住我</el-checkbox>
      <el-button type="primary" style="width:100%"  @click="submitLogin('loginForm')">登录</el-button>
    </el-form>
  </div>
</template>

<script>
    export default {
        name: "Login",
      data(){
          return {
            loading:false,
            checked:true,
            catpchaUrl:'http://127.0.0.1:8989/captcha?time='+new Date(),
            loginForm:{
              username:'admin',
              password:'123',
              validateCode:''
            },
            rules:{
              username: [
                { required: true, message: '请输用户名称', trigger: 'blur' }
              ],
              password: [
                { required: true, message: '请输密码', trigger: 'blur' }
              ],
              validateCode: [
                { required: true, message: '请输验证码', trigger: 'blur' }
              ]
            }
          }
      },

      methods:{
        updateCaptcha(){
            this.catpchaUrl = 'http://127.0.0.1:8989/captcha?time='+new Date();
        },
        submitLogin(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.loading = true;
              // let form = this.$refs['loginForm'].$el
              // let formData = new FormData(form)
              // formData.append('username', )
              // formData.append('password', this.loginForm.password)
              // formData.append('codeValue', this.loginForm.codeValue)
              let params = new URLSearchParams(this.loginForm);
              // params.append('username', this);
              // params.append('password', 'value2');
              // params.append('password', 'value2');
              this.$axios({
                url:'/login',
                method:'post',
                data:params
              }).then(suc=>{
                this.loading = false;
                console.log(suc)
                //假设拿到了token
                // const tokenStr = suc.token;
                //存储用户token
                const tokenStr = 'tokenjfdsaklfdalflsajfdsaf';
                window.sessionStorage.setItem("tokenStr",tokenStr);
                this.$router.replace("/home")
                this.$message({
                  showClose: true,
                  message: '登录成功',
                  type: 'success'
                });
              }).then(err=>{
                console.log(err)
              });
            } else {
              this.$message({
                showClose: true,
                message: '登录失败，请输入相关字段',
                type: 'error'
              });
              console.log('error submit!!');
              return false;
            }
          });
        }
      }
    }
</script>

<style scoped>
  .loginRem{
    text-align: left;
    margin: 0px 0px 20px 0px;
    float: left;
  }
  .loginTitle{
    text-align: center;
    margin: 0 auto 20px auto;
  }
  .loginContainer{
    border-radius: 15px;
    background-clip:padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

</style>
